<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../../styles/common.css" />
    <link rel="stylesheet" href="../../styles/page.css" />
    <style>
      .addDish .el-input {
        width: 130px;
      }
      .addDish .el-input-number__increase {
        border-left: solid 1px #FFE1CA;
        background: #fff3ea;
      }
      .addDish .el-input-number__decrease {
        border-right: solid 1px #FFE1CA;
        background: #fff3ea;
      }
      .addDish input {
        border: 1px solid #ffe1ca;
      }
      .addDish .table {
        border: solid 1px #EBEEF5;
        border-radius: 3px;
      }
      .addDish .table th {
        padding: 5px 0;
      }
      .addDish .table td {
        padding: 7px 0;
      }
      .addDishList .seachDish {
        position: absolute;
        top: 10px;
        right: 20px;
      }
      .addDishList .el-dialog__body {
        padding: 0;
        border-bottom: solid 1px #ccc;
      }
      .addDishList .el-dialog__footer {
        padding-top: 27px;
      }

      .addDish {
        width: 777px;
      }
      .addDish .addBut {
        background: #ffc200;
        display: inline-block;
        padding: 0px 20px;
        border-radius: 3px;
        line-height: 40px;
        cursor: pointer;
        border-radius: 4px;
        color: #333333;
        font-weight: 500;
      }
      .addDish .content {
        background: #fafafb;
        padding: 20px;
        border: solid 1px #ccc;
        border-radius: 3px;
      }
      .addDishCon {
        padding: 0 20px;
        display: flex;
        line-height: 40px;
      }
      .addDishCon .leftCont {
        display: flex;
        border-right: solid 2px #E4E7ED;
        width: 60%;
        padding: 15px;
      }
      .addDishCon .leftCont .tabBut {
        width: 110px;
      }
      .addDishCon .leftCont .tabBut span {
        display: block;
        text-align: center;
        border-right: solid 2px #f4f4f4;
        cursor: pointer;
      }
      .addDishCon .leftCont .act {
        border-color: #FFC200 !important;
        color: #FFC200 !important;
      }
      .addDishCon .leftCont .tabList {
        flex: 1;
        padding: 15px;
      }
      .addDishCon .leftCont .tabList .table {
        border: solid 1px #f4f4f4;
        border-bottom: solid 1px #f4f4f4;
      }
      .addDishCon .leftCont .tabList .table .items {
        border-bottom: solid 1px #f4f4f4;
        padding: 0 10px;
        display: flex;
      }
      .addDishCon .leftCont .tabList .table .items .el-checkbox, .addDishCon .leftCont .tabList .table .items .el-checkbox__label {
        width: 100%;
      }
      .addDishCon .leftCont .tabList .table .items .item {
        display: flex;
        padding-right: 20px;
      }
      .addDishCon .leftCont .tabList .table .items .item span {
        display: inline-block;
        text-align: center;
        flex: 1;
      }
      .addDishCon .ritCont {
        width: 40%;
        padding: 0 15px;
      }
      .addDishCon .ritCont .item {
        box-shadow: 0px 1px 4px 3px rgba(0, 0, 0, 0.03);
        display: flex;
        text-align: center;
        padding: 0 10px;
        margin-bottom: 20px;
        border-radius: 6px;
        color: #818693;
      }
      .addDishCon .ritCont .item span:first-child {
        text-align: left;
        color: #20232A;
      }
      .addDishCon .ritCont .item .price {
        display: inline-block;
        flex: 1;
      }
      .addDishCon .ritCont .item .del {
        cursor: pointer;
      }
      .addDishCon .ritCont .item .del img {
        position: relative;
        top: 5px;
        width: 20px;
      }

      .addDishCon .el-checkbox__label{
        width: 100%;
      }
      #combo-add-app .setmealFood .el-form-item__label::before{
          content: '*';
          color: #F56C6C;
          margin-right: 4px;
      }

      #combo-add-app .uploadImg .el-form-item__label::before{
          content: '*';
          color: #F56C6C;
          margin-right: 4px;
      }
    </style>
  </head>
  <body>
    <div class="addBrand-container" id="combo-add-app">
      <div class="container">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          :inline="true"
          label-width="180px"
          class="demo-ruleForm"
        >
          <div>
            <el-form-item label="模块名称:" prop="name" >
              <el-input v-model="ruleForm.name" placeholder="请填写模块名称" maxlength="20"/>
            </el-form-item>
            <el-form-item label="模块类型:" prop="ctype">
              <el-radio v-model="ruleForm.ctype" label="0">主菜单</el-radio>
              <el-radio v-model="ruleForm.ctype" label="1">二级菜单</el-radio>
              <el-radio v-model="ruleForm.ctype" label="2">按钮</el-radio>
            </el-form-item>
          </div>
          <div>
            <el-form-item
                    label="上级模块:"
                    prop="cpermission"
            >
              <el-select
                      v-model="ruleForm.parentName"
                      placeholder="请选择上级模块"
              >
                <el-option v-for="(item,index) in parentNameList" :key="index" :label="item.parentName" :value="item.parentName" />
              </el-select>
            </el-form-item>
            <el-form-item label="模块状态:" prop="state">
              <el-radio v-model="ruleForm.state" label="0">停用</el-radio>
              <el-radio v-model="ruleForm.state" label="1">启用</el-radio>
              <!-- <el-input v-model="ruleForm.state" placeholder="请选择模块手机" maxlength="20"/> -->
            </el-form-item>
          </div>
          <div>
            
            <el-form-item label="链接:" prop="curl">
              <el-input v-model="ruleForm.curl" placeholder="请填写模块链接" maxlength="20"/>
            </el-form-item>
          </div>
          
          <div class="address">
            <el-form-item label="模块描述:">
              <el-input v-model="ruleForm.remark" type="textarea" :rows="3" placeholder="模块描述，最长200字" maxlength="200"/>
            </el-form-item>
          </div>
          <div class="subBox address">
            <el-form-item>
              <el-button @click="goBack()"> 取消 </el-button>
              <el-button type="primary" @click="submitForm('ruleForm', false)"> 保存 </el-button>
              <el-button
                v-if="actionType == 'add'"
                type="primary"
                class="continue"
                @click="submitForm('ruleForm', true)"
              >
                保存并继续添加模块
              </el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <script src="../../js/request.js"></script>
    <script src="../../api/module.js"></script>
    <script src="../../js/validate.js"></script>
    <script src="../../js/index.js"></script>
    <script src="../../api/food.js"></script>
    <script>
      new Vue({
        el: '#combo-add-app',
        data() {
          return {
            id: '',
            actionType: '',
            value: '',
            setMealList: [],
            seachKey: '',
            parentNameList: [],
            dishTable: [],
            dialogVisible: false,
            checkList: [],
            ruleForm: {
              name: '',
              ctype: '0',
              cpermission: '',
              curl: '',
              state: '0',
              remark: '',
              parentName: ''
            }
          }
        },
        computed: {
          rules() {
            return {
              name: {
                required: true,
                message: '请输入模块名称',
                trigger: 'blur',
              },
              curl: {
                required: true,
                message: '请输入模块链接',
                trigger: 'change',
              },
            }
          },
        },
        watch:{
          seachKey(value){
            if (value.trim()){
              this.getDishForName(this.seachKey)
            }
          },
          checkList(value){
            this.checkedList = value
          }
        },
        created() {
          this.id = requestUrlParam('id')
          this.actionType = this.id ? 'edit' : 'add'
          this.getModuleList()
          if (this.id) {
            this.init()
          }
        },
        mounted() {},
        methods: {
          async init() {
            queryModuleById(this.id).then((res) => {
              if (String(res.code) === '1') {
                this.ruleForm = res.data
                // this.ruleForm.status = res.data.status === '1'
                // this.ruleForm.company = res.data.company
                // this.ruleForm.email = res.data.email
                // this.imageUrl = `/common/download?name=${res.data.image}`
                // this.ruleForm.phone = res.data.phone
                // this.ruleForm.password = ''
              } else {
                this.$message.error(res.msg || '操作失败')
              }
            })
          },
          
          submitForm(formName, st) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                let prams = { ...this.ruleForm }
                prams.name = this.ruleForm.name
                prams.ctype = this.ruleForm.ctype
                prams.cpermission = this.ruleForm.cpermission
                prams.curl = this.ruleForm.curl
                prams.state = this.ruleForm.state
                prams.remark = this.ruleForm.remark
                prams.parentName = this.ruleForm.parentName
                if (this.actionType == 'add') {
                  delete prams.id
                  addModule(prams)
                    .then((res) => {
                      if (res.code === 1) {
                        this.$message.success('模块添加成功！')
                        if (!st) {
                          this.goBack()
                        } else {
                          this.$refs.ruleForm.resetFields()
                          this.ruleForm = {
                            name: '',
                            ctype: '0',
                            cpermission: '',
                            curl: '',
                            state: '0',
                            remark: '',
                            parentName: ''
                          }
                        }
                      } else {
                        this.$message.error(res.msg || '操作失败')
                      }
                    })
                    .catch((err) => {
                      this.$message.error('请求出错了：' + err)
                    })
                } else {
                  editModule(prams)
                    .then((res) => {
                      if (res.code === 1) {
                        this.$message.success('模块修改成功！')
                        this.goBack()
                      } else {
                        this.$message.error(res.msg || '操作失败')
                      }
                    })
                    .catch((err) => {
                      this.$message.error('请求出错了：' + err)
                    })
                }
              } else {
                return false
              }
            })
          },

          // 获取模块分类
          getModuleList () {
            getCpermissionList().then(res => {
              if (res.code === 1) {
                this.parentNameList = res.data
              } else {
                this.$message.error(res.msg || '操作失败')
              }
            })
          },
          handleAvatarSuccess (response, file, fileList) {
            // this.imageUrl = response.data
            if(response.code === 0 && response.msg === '未登录'){
              window.top.location.href = '/backend/page/login/login.html'
            }else{
              this.imageUrl = `/common/download?name=${response.data}`
              this.ruleForm.image = response.data
            }
          },
          goBack() {
            window.parent.menuHandle(
              {
                id: '6',
                url: '/backend/page/module/list.html',
                name: '模块管理',
              },
              false
            )
          },
          
          open (done) {
            this.dishListCache = JSON.parse(JSON.stringify(this.checkList))
          },

          close (done) {
            this.checkList = this.dishListCache
          },

          // 删除
          delCheck (ind){
            this.checkedList.splice(ind, 1)
          }
        },
      })
    </script>
  </body>
</html>
